<template>
  <div class="container">
    <div class="banner">
      <!-- 轮播图区域 banner -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="200">
        <van-swipe-item>
          <img src="@/assets/imgs/home/banner_10years.jpg" alt="十周年" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/imgs/home/banner_dropdown.gif" alt="下拉刷新" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/imgs/home/banner_feikuai.jpg" alt="啡快" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 产品区域 -->
    <div class="product">
      <!-- 核心区域，包含啡快和专星送 -->
      <div class="core">
        <div class="feikuai" @click="toFeikuai">
          <!-- <p>在线点，到店取</p> -->
          <img src="@/assets/imgs/home/core-feikuai.png" alt="啡快" />
        </div>
        <div class="zhuanxingsong">
          <!-- <p>外送到家</p> -->
          <img src="@/assets/imgs/home/core-zhuanxingsong.png" alt="专星送" />
        </div>
      </div>
      <!-- 活动区域，包含：送心意、福利购、拼单 -->
      <div class="activity">
        <div>
          <img src="@/assets/imgs/home/activity-care.png" alt="心意" />
        </div>
        <div>
          <img src="@/assets/imgs/home/activity-welfare.png" alt="福利" />
        </div>
        <div>
          <img src="@/assets/imgs/home/activity-pindan.png" alt="拼单" />
        </div>
      </div>
    </div>
    <!-- 查找门店区域 -->
    <div class="store" @click="toCity">
      <div>
        <b>查找门店</b>
        <p>带你发掘更多线下门店</p>
      </div>
      <img src="@/assets/imgs/home/store-find.png" alt="门店" />
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router"
const router = useRouter()

function toFeikuai(){
  router.push({ name: 'FeiKuai' })
}

function toCity(){
  router.push({ name: 'City' })
}
</script>
<style lang="scss" scoped>
img {
  width: 100%;
  background-repeat: no-repeat;
}
.container {
  .product {
    padding: 15px;
    .core {
      background: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      .feikuai {
        border-right: 1px solid #ccc;
      }
    }
    .activity {
      background: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-around;
      div {
        width: 6rem;
        p {
          text-align: center;
        }
      }
    }
    .ad {
      border-radius: 20px;
      img {
        border-radius: 8px;
      }
    }
  }
  .store {
    width: 100%;
    height: 6rem;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    b {
      font-size: 1.5rem;
    }
    img {
      width: 30%;
    }
  }
}
</style>
